<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title i18n>
            注册
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <form [formGroup]="formGroup">
        <ion-item>
            <ion-label floating>手机号</ion-label>
            <ion-input formControlName="phone" type="text" required></ion-input>
        </ion-item>
        <ion-row id="popup-captcha-geetest" center></ion-row>
        <ion-grid>
            <ion-row>
                <ion-col bottom>
                    <button ion-button padding (click)="onGetCaptchaClicked()"
                            [disabled]="!validStatus.phone || !validStatus.sendCaptcha">
                        获取验证码{{sendCaptchaTick ? "(" + sendCaptchaTick+"秒后可用)":""}}
                    </button>
                </ion-col>
                <ion-col width-90>
                    <ion-item>
                        <ion-label floating>验证码</ion-label>
                        <ion-input formControlName="captcha" type="text" required></ion-input>
                    </ion-item>
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-item>
            <ion-label floating>密码</ion-label>
            <ion-input formControlName="password" type="password" required></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>确认密码</ion-label>
            <ion-input formControlName="password2" type="password" required></ion-input>
        </ion-item>
        <ion-item>
            <button ion-button block padding (click)="onRegisterClicked()"
                    [disabled]="!validStatus.captcha || !validStatus.password || !validStatus.password2">
                注册
            </button>
        </ion-item>
        <ion-item *ngFor="let message of formErrorMessages">
            <ion-label color="danger">{{message}}</ion-label>
        </ion-item>
    </form>
</ion-content>
